<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        body {}


        div.back0{
          color: black;
          background-color: #d4c9c9;
        }
        div span.aui-margin-l-5,div .aui-info-item{
          font-size: 16px;
          color: black;
        }
        div span.right {
            color: green;
        }

        div span.errors {
            color: red;
        }
        div span.core {
            color: blue;
        }
        [v-cloak] {
          display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
      <h1 v-if="students.length === 0" style="color:red;margin-top:300px;">还没有人答题呢....</h1>
      <div v-for="(item,index) in students" @click="toError(item.testpaperid)" :class="`back${index%2}`">
          <div class="aui-info">

              <div class="aui-info-item">
                  <img src="../image/demo2.png" style="width:1.5rem" class="aui-img-round" />
                  <span class="aui-margin-l-5">{{item.username}}</span>
                  <span class="aui-margin-l-5">学号:{{item.userid}}</span>

              </div>
              <div class="aui-info-item">完成时间:{{item.ceatetime}}</div>
          </div>
          <div class="aui-info">
              <div class="aui-info-item">
                  <span style="width:20px"></span>
                  <span class="aui-margin-l-5">一共<strong>{{item.truenum+item.errornum }}</strong>题</span>
                  <span style="width:20px"></span>
                  <span class="aui-margin-l-5 right">正确:{{item.truenum}}</span>
                  <span style="width:20px"></span>
                  <span class="aui-margin-l-5 errors">错误:{{item.errornum}}</span>
                  <span style="width:20px"></span>
                  <span class="aui-margin-l-5 core">正确率:{{getRate(item.truenum,item.errornum)}}</span>
                  <span style="width:10px"></span>
                  <span class="aui-margin-l-5 core">考试编号:{{item.testpaperid}}</span>
              </div>
          </div>
      </div>

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript" src="../script/init.js"></script>

<script type="text/javascript">
var user = JSON.parse(localStorage.getItem('user'))
var index =""

var app = new Vue({
  el:'#app',
  data:{
    students:[],
  },
  methods:{
    toError (id) {
      api.openWin({
          name: 'errortitle',
          url: './errortitle.html',
          pageParam: {
              paperid: id
          }
      });

    },
    getRate (right,error) {
      return ((right/(right+error)).toFixed(2))*100
    },
    getCore () {
      index = layer.load()
      $.ajax({
      url:bashUrl+`score/${api.pageParam.paperid}`,
      type:"get",
      data:"",
      timeout:5000,
      dataType:"json",
      success:(data)=>{
        layer.close(index)
        this.students = data
      },
      error: function () {
        layer.close(index)
        api.toast({msg:"请求超时或繁忙",duration : 2000})
      }
      });
    },
    getCoreByUser () {
      index = layer.load()
      $.ajax({
      url:bashUrl+`score/user/${user.userid}`,
      type:"get",
      data:"",
      timeout:5000,
      dataType:"json",
      success:(data)=>{
        layer.close(index)
        this.students = data
      },
      error: function () {
        layer.close(index)
        api.toast({msg:"请求超时或繁忙",duration : 2000})
      }
      });
    }
  }
})
    apiready = function() {

        api.addEventListener({
            name:'viewappear'
        }, function(ret, err){
            app.getCoreByUser()

        });
    };
</script>

</html>
